<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<title>{{ .title}}</title>
	<style>
.room{font-size:large;background:#BBB;margin:3px;}
.client{background:#CCC;padding:0px;margin:3px;}
	</style>
</head>
<body onload="onLoadFunc();">
<div id="maindiv" style="margin:0 auto">
    <div style="width=100%;text-align:right;"><button onclick="logoutWs();">注销</button></div>
    <div style="width=100%;text-align:center;"><h2 id="chatroom">聊天室</h2></div>
    <div style="float:left;width:150px;margin:5px;">
		<ul>
		{{range .rooms}}<li><div class="room">{{.}}</div></li>{{end}}
		</ul>
	</div>
	<div style="float:left;width:380px;">
		<div id="messages"
			style="border-width: 1px; border-style: solid; height: 400px; width: 375px;overflow-y:scroll;overflow-x:scroll">
		</div>
		<input type="text" id="messageTxt" />
		<button type="button" id="sendBtn">Send</button>
		<div style="float:left;width=100%;text-align:center;">注意不要谈论隐私信息，所有聊天内容将被服务器记录！
		<a target="_blank" href="/history/all/0">点击查看聊天记录</a></div>
    </div>
	<div style="float:left;width:140px;">
		<div id="clients">
		  <div style="background:#F10AF1;">成员列表</div>
		</div>
	</div>
</div>
	<script src="{{.Prefix}}/static/jquery.min.js"></script>
	<script src="{{.Prefix}}/static/iris-ws.js" type="text/javascript"></script>
	<script>
var messageTxt;
var messages;
var w;
const HOST = "{{.host}}/chat/serve";
const sessionID = "{{.SessionID}}";

$(function () {
	messageTxt = $("#messageTxt");
	messages = $("#messages");
	let wshost = location.protocol === 'https'
		? 'wss://'+ HOST
		: 'ws://' + HOST;
	w = new Ws(wshost);
	w.On("chat",function(msg){
		appendMessage($("<div>" + msg + "</div>"));
	});

	w.On("join",function(msg){
		appendMessage($("<div>join:" + msg + "</div>"));
		var v = msg.split(" ");
		$("#chatroom").text(v[1]);
		appendClient(v[0]);

	});
	w.On("leave",function(msg){
		appendMessage($("<div>leave:" + msg + "</div>"));
		var v = msg.split(" ");
		removeClient(v[0]);
	});
	w.On("names",function(msg){
		appendMessage($("<div>names:" + msg + "</div>"));
		var v = msg.split(" ");
		$("#clients").html("<div style=\"background:#F10AF1;\">成员列表</div>")
		for(var i=0;i<v.length;i++){
			appendClient(v[i])
		}
	});
	w.On("pong",function(msg){
		return;
	});
	w.OnDisconnect(function(){
		appendMessage($("<div><center><h3>Disconnected</h3></center></div>"));
	});
	w.OnConnect(function(){
		w.Emit("init",sessionID);
		setInterval("w.Emit('ping','ok');",120000);
	});

	$("#sendBtn").click(function () {
		w.Emit("chat",messageTxt.val().toString());
		messageTxt.val("");
	});
	$(".room").each(function(){
		$(this).click(function(){
			w.Emit("join",$(this).text());
		});
	});
});

function appendMessage(messageDiv) {
    var theDiv = messages[0];
    var doScroll = (theDiv.scrollTop == theDiv.scrollHeight - theDiv.clientHeight);
    messageDiv.appendTo(messages);
    if (doScroll) {
        theDiv.scrollTop = theDiv.scrollHeight - theDiv.clientHeight;
    }
}

function appendClient(name){
	var names = $("p[v='"+name+"']");
	if (names.length==0){
		var ul1 = $("#clients");
		var txt1 = ul1.html()
		ul1.html( txt1+"<p class='client' v='"+name+"'>"+name+"</p>" )
	}
}

function removeClient(name){
	$("p[v='"+name+"']").each(function(){
		var p = this.parentNode;
		p.removeChild(this);
	});
}

function logoutWs(){
	w.Disconnect();
	window.location.href="{{.Prefix}}/user/logout";
}

function onLoadFunc(){
	var width = $(window).width();
	if(width>720){
		$("#maindiv").css("width","720px");
	}else{
		$("#maindiv").css("width","100%");
	}
}
	</script>
</body>

</html>
